// 注册页面
import React from 'react';
import {
  StyleSheet, View, TextInput, Text, ScrollView
} from 'react-native';
import {
  WhiteSpace, Checkbox
} from 'antd-mobile-rn';
import { NavigationActions } from 'react-navigation';
// import HeaderBackButton from '../components/HeaderBackButton';
import VerificationCode from '../components/VerificationCode';
// import HeaderRightSaveButton from '../components/HeaderRightSaveButton';
import BaseView from './BaseView';

export default class Register extends BaseView {
  constructor() {
    super();
    this.state = {
      ...this.BaseState, // 继承基础state
      phone: '',
      yzm: '',
      time: 60,
      yyzz: '',
      dm: '',
      psw: '',
      repsw: '',
      email: '',
      agree: true,
      name: '',
      addr: '',
      shxydm: '',
      zztime: '',
      zsbm: '',
      zstime: '',
      xkzbh: '',
      fdrdb: '',
      bank: '',
      account: '',
    };
    this.onStart = this.onStart.bind(this);
  }

  // 生命周期render前
  componentWillMount() {
    const { navigation } = this.props;
    navigation.setParams({ goback: this.goback.bind(this) });
  }

  componentDidMount() {
    super.componentDidMount();
    // 设置头部
    super.componentDidMount();
    this.props.navigation.setParams({
      title: '注册页面',
      backgroundColor: '#199ed8',
      textColor: '#fff',
      rightTxt: '提交',
      rightClickL: this.save.bind(this)
    });
    super.setState({
      loading: true
    });
  }

  // 发送验证码
  onStart() {
    const { phone } = this.state;
    if (this.checkPhone(phone)) {
      alert('验证通过, 稍后请查收');
      // TODO 发送验证码请求
      return true;
    }
    alert('手机号不正确, 修改后再试');
    return false;
  }

  // 返回
  goback() {
    const { navigation } = this.props;
    const backAction = NavigationActions.back();
    navigation.dispatch(backAction);
  }

  // 提交注册
  save(phone, yzm) {
    if (!this.checkPhone(phone)) {
      alert('手机号不正确');
      return false;
    } if (!yzm) {
      alert('验证码不能为空');
      return false;
    }

    this.toLogin();
    return false;
    // TODO提交保存
  }

  toLogin() {
    const { navigation } = this.props;

    const navigateAction = NavigationActions.navigate({
      routeName: 'Login',
      params: {}
    });
    navigation.dispatch(navigateAction);
  }

  // 纯数字检测
  chkNumber(obj) {
    const reg = /^[0-9]+$/;
    if (!reg.test(obj)) {
      obj = obj.substr(0, (obj.length - 1));
    }
    return obj;
  }

  // 手机号检测
  checkPhone(phone) {
    return phone.length === 11;
  }

  // 位空检测
  checkNull(phone) {
    return phone.length === 0;
  }

  render() {
    const {
      phone, yzm, time, yyzz, dm, psw, repsw, email, agree,
      name, addr, shxydm, zztime,
      zsbm, zstime,
      xkzbh, fdrdb, bank, account
    } = this.state;
    return (
      <ScrollView style={{ backgroundColor: '#f7f7f7' }}>
        <View style={register.wrap}>
          <View style={register.row}>
            <View style={register.inputWrap}>
              <WhiteSpace />
              <TextInput
                style={register.input}
                placeholder="请输入手机号"
                underlineColorAndroid="transparent"
                value={phone}
                onChangeText={(text) => {
                  this.setState({ phone: this.chkNumber(text) });
                }}
                onBlur={() => {
                  // TODO 找不到vlue值
                  if (this.checkNull(phone)) {
                    alert('手机号不能为空');
                  }
                }}
              />
              <WhiteSpace />
              <View
                style={{
                  width: SCALE(576),
                  height: SCALE(76),
                  position: 'relative'
                }}
              >
                <TextInput
                  style={register.input}
                  keyboardType="number-pad"
                  placeholder="请输入验证码"
                  underlineColorAndroid="transparent"
                  value={yzm}
                  onChangeText={(text) => {
                    this.setState({ yzm: text });
                  }}
                  onBlur={() => {
                    if (this.checkNull(yzm)) {
                      alert('验证码不能为空');
                    }
                  }}
                />
                <View style={register.yzm}>
                  <VerificationCode time={time} onStart={this.onStart} />
                </View>
              </View>
              <WhiteSpace />
              <TextInput
                style={register.input}
                placeholder="请输入邮箱地址"
                underlineColorAndroid="transparent"
                value={email}
                onChangeText={(text) => {
                  this.setState({ email: text });
                }}
                onBlur={() => {
                  if (this.checkNull(email)) {
                    alert('邮箱地址不能为空');
                  }
                }}
              />
              <WhiteSpace />
              <TextInput
                style={register.input}
                placeholder="请输入营业执照名称"
                underlineColorAndroid="transparent"
                value={yyzz}
                onChangeText={(text) => {
                  this.setState({ yyzz: text });
                }}
                onBlur={() => {
                  if (this.checkNull(yyzz)) {
                    alert('营业执照名称不能为空');
                  }
                }}
              />
              <WhiteSpace />
              <TextInput
                style={register.input}
                placeholder="请输入店名"
                underlineColorAndroid="transparent"
                value={dm}
                onChangeText={(text) => {
                  this.setState({ dm: text });
                }}
                onBlur={() => {
                  if (this.checkNull(dm)) {
                    alert('店名不能为空');
                  }
                }}
              />
              <WhiteSpace />
              <TextInput
                style={register.input}
                placeholder="请输入新密码"
                underlineColorAndroid="transparent"
                value={psw}
                onChangeText={(text) => {
                  this.setState({ psw: text });
                }}
                onBlur={() => {
                  if (this.checkNull(psw)) {
                    alert('新密码不能为空');
                  }
                }}
              />
              <WhiteSpace />
              <TextInput
                style={register.input}
                placeholder="请重新输入新密码"
                underlineColorAndroid="transparent"
                value={repsw}
                onChangeText={(text) => {
                  this.setState({ repsw: text });
                }}
                onBlur={() => {
                  if (this.checkNull(repsw)) {
                    alert('再次输入新密码不能为空');
                  }
                }}
              />
            </View>
          </View>
          <WhiteSpace name="lg" />
          <Text style={{ width: 300 }}>营业执照</Text>
          <WhiteSpace />
          <View style={register.row}>
            <View style={register.inputWrap}>
              <WhiteSpace />
              <TextInput
                style={register.input}
                placeholder="公司名称"
                underlineColorAndroid="transparent"
                value={name}
                onChangeText={(text) => {
                  this.setState({ name: this.chkNumber(text) });
                }}
                onBlur={() => {
                  if (this.checkNull(name)) {
                    alert('营业执照公司名称不能为空');
                  }
                }}
              />
              <WhiteSpace />
              <TextInput
                style={register.input}
                keyboardType="number-pad"
                placeholder="公司地址"
                underlineColorAndroid="transparent"
                value={addr}
                onChangeText={(text) => {
                  this.setState({ addr: text });
                }}
                onBlur={() => {
                  if (this.checkNull(addr)) {
                    alert('营业执照公司地址不能为空');
                  }
                }}
              />
              <WhiteSpace />
              <TextInput
                style={register.input}
                placeholder="社会信用编码"
                underlineColorAndroid="transparent"
                value={shxydm}
                onChangeText={(text) => {
                  this.setState({ shxydm: text });
                }}
                onBlur={() => {
                  if (this.checkNull(shxydm)) {
                    alert('营业执照社会性用编码不能为空');
                  }
                }}
              />
              <WhiteSpace />
              <TextInput
                style={register.input}
                placeholder="有效期限"
                underlineColorAndroid="transparent"
                value={zztime}
                onChangeText={(text) => {
                  this.setState({ zztime: text });
                }}
                onBlur={() => {
                  if (this.checkNull(zztime)) {
                    alert('营业执照有效期限不能为空');
                  }
                }}
              />
            </View>
          </View>
          <WhiteSpace />

          <Text style={{ width: 300 }}>餐饮许可证</Text>
          <WhiteSpace />
          <View style={register.row}>
            <View style={register.inputWrap}>
              <WhiteSpace />
              <TextInput
                style={register.input}
                placeholder="公司名称"
                underlineColorAndroid="transparent"
                value={name}
                onChangeText={(text) => {
                  this.setState({ name: this.chkNumber(text) });
                }}
                onBlur={() => {
                  if (this.checkNull(name)) {
                    alert('餐饮许可证公司名称不能为空');
                  }
                }}
              />
              <WhiteSpace />
              <TextInput
                style={register.input}
                keyboardType="number-pad"
                placeholder="公司地址"
                underlineColorAndroid="transparent"
                value={addr}
                onChangeText={(text) => {
                  this.setState({ addr: text });
                }}
                onBlur={() => {
                  if (this.checkNull(addr)) {
                    alert('餐饮许可证公司地址不能为空');
                  }
                }}
              />
              <WhiteSpace />
              <TextInput
                style={register.input}
                placeholder="证书编码"
                underlineColorAndroid="transparent"
                value={zsbm}
                onChangeText={(text) => {
                  this.setState({ zsbm: text });
                }}
                onBlur={() => {
                  if (this.checkNull(zsbm)) {
                    alert('餐饮许可证证书编码不能为空');
                  }
                }}
              />
              <WhiteSpace />
              <TextInput
                style={register.input}
                placeholder="有效期限"
                underlineColorAndroid="transparent"
                value={zstime}
                onChangeText={(text) => {
                  this.setState({ zstime: text });
                }}
                onBlur={() => {
                  if (this.checkNull(zstime)) {
                    alert('餐饮许可证有效期限不能为空');
                  }
                }}
              />
            </View>
          </View>

          <WhiteSpace />
          <Text style={{ width: 300 }}>开户许可证</Text>
          <WhiteSpace />
          <View style={register.row}>
            <View style={register.inputWrap}>
              <WhiteSpace />
              <TextInput
                style={register.input}
                placeholder="许可证编号"
                underlineColorAndroid="transparent"
                value={xkzbh}
                onChangeText={(text) => {
                  this.setState({ xkzbh: this.chkNumber(text) });
                }}
                onBlur={() => {
                  if (this.checkNull(xkzbh)) {
                    alert('许可证编号不能为空');
                  }
                }}
              />
              <WhiteSpace />
              <TextInput
                style={register.input}
                keyboardType="number-pad"
                placeholder="公司名称"
                underlineColorAndroid="transparent"
                value={name}
                onChangeText={(text) => {
                  this.setState({ name: text });
                }}
                onBlur={() => {
                  if (this.checkNull(name)) {
                    alert('公司名称不能为空');
                  }
                }}
              />
              <WhiteSpace />
              <TextInput
                style={register.input}
                placeholder="法定代表人"
                underlineColorAndroid="transparent"
                value={fdrdb}
                onChangeText={(text) => {
                  this.setState({ fdrdb: text });
                }}
                onBlur={() => {
                  if (this.checkNull(fdrdb)) {
                    alert('法定代表人不能为空');
                  }
                }}
              />
              <WhiteSpace />
              <TextInput
                style={register.input}
                placeholder="开户银行"
                underlineColorAndroid="transparent"
                value={bank}
                onChangeText={(text) => {
                  this.setState({ bank: text });
                }}
                onBlur={() => {
                  if (this.checkNull(value)) {
                    alert('开户银行不能为空');
                  }
                }}
              />
              <WhiteSpace />
              <TextInput
                style={register.input}
                placeholder="账号"
                underlineColorAndroid="transparent"
                value={account}
                onChangeText={(text) => {
                  this.setState({ account: text });
                }}
                onBlur={() => {
                  if (this.checkNull(value)) {
                    alert('账号不能为空');
                  }
                }}
              />
            </View>
          </View>
          <WhiteSpace />
          <Text style={{ width: 300 }}>其他证书</Text>
          <View style={register.row} />
          <WhiteSpace />

          <View style={register.agreeWrap}>
            <Checkbox value={{ agree }} />
            <Text>注册时同意平台协议</Text>
          </View>
        </View>
      </ScrollView>
    );
  }
}

const register = StyleSheet.create({
  wrap: {
    flex: 1,
    alignItems: 'center',
    marginTop: SCALE(40),
  },
  content: {
    width: SCALE(576),
    flexDirection: 'row',
    alignItems: 'center',
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'center',
    marginBottom: SCALE(20),
  },
  inputWrap: {
    width: SCALE(576),
  },
  agreeWrap: {
    width: SCALE(576),
    flexDirection: 'row',
    justifyContent: 'center',
    marginBottom: SCALE(20),
  },
  input: {
    borderWidth: 1,
    height: SCALE(76),
    borderColor: '#ccc',
    borderStyle: 'solid',
    borderRadius: 8,
    paddingRight: SCALE(30),
    paddingLeft: SCALE(30),
    backgroundColor: '#fff'
  },
  btnWrap: {
    marginTop: SCALE(80),
    width: SCALE(576),
    height: SCALE(76),
    backgroundColor: '#044e8d',
    borderWidth: 0,
  },
  yzm: {
    position: 'absolute',
    right: 0,
    top: 0,
    borderRadius: 4,
    height: SCALE(76),
    paddingLeft: SCALE(25),
    paddingRight: SCALE(25),
    backgroundColor: '#044e8d'
  }
});
